<template>
  <headVue name="鸡"></headVue>
  <main>
    <div class="card">
      <img
        src="https://www.zgmyncpjyw.com/uploadfiles/2022/03/20220328114102727.jpg"
        alt=""
      />
      <p>凤祥食品冷冻半成品凤祥奥尔良烤翅鸡翅休闲食品必备油炸鸡肉</p>
      <div class="price">￥50.00</div>
    </div>
    <van-pagination
      v-model="currentPage"
      :total-items="1"
      :items-per-page="5"
      aria-setsize="mini"
    />
  </main>
</template>

<script>
import headVue from "@/components/head.vue";
export default {
  name: "categoryPro",
  data() {
    return {
      currentPage: "1",
    };
  },
  components: {
    headVue,
  },
};
</script>

<style scoped>
main {
  padding: 0 10px;
}
.card {
  width: 200px;
  height: 250px;
  border-radius: 10px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 3px -2px 3px 2px rgba(0, 0, 0, 0.221);
}
img {
  width: 80%;
}
.price {
  width: 100%;
  text-align: left;
  font-size: 16px;
  color: #1a9956;
  margin-top: 5px;
  font-weight: bold;
}
:deep(.van-pagination__item--active){
    background-color: #1a9956;
}
</style>